<template>
  <view class="container">
    
    <Card class="filter-card">
      <view class="filter-item">
        <text class="label">通知类型</text>
        <picker 
          mode="selector" 
          :range="notificationTypes" 
          @change="onTypeChange"
        >
          <view class="picker">
            {{ selectedType || '全部类型' }}
          </view>
        </picker>
      </view>
    </Card>
    
    <view class="notifications-list">
      <Card 
        v-for="(notification, index) in notifications" 
        :key="index" 
        class="notification-card"
        :class="notification.unread ? 'unread' : ''"
        @click="markAsRead(notification)"
      >
        <view class="notification-header">
          <text class="notification-title">{{ notification.title }}</text>
          <text class="notification-time">{{ notification.time }}</text>
        </view>
        <text class="notification-content">{{ notification.content }}</text>
        <view class="notification-footer">
          <view class="notification-type" :class="'type-' + notification.type">
            {{ notification.typeLabel }}
          </view>
          <view class="notification-status">
            <text v-if="notification.unread" class="unread-dot"></text>
            <text v-else class="read-status">已读</text>
          </view>
        </view>
      </Card>
    </view>
    
    <view class="no-notifications" v-if="notifications.length === 0">
      <text class="no-text">暂无通知</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notificationTypes: ['全部类型', '系统通知', '积分变动', '计划提醒', '目标进度'],
      selectedType: '全部类型',
      notifications: [
        {
          id: '1',
          title: '积分变动提醒',
          content: '您因为完成学习计划获得5积分，当前总积分185分',
          type: 'points',
          typeLabel: '积分变动',
          time: '2025.08.28 19:30',
          unread: true
        },
        {
          id: '2',
          title: '计划执行提醒',
          content: '张小明的数学每日练习计划即将开始，请做好准备',
          type: 'plan',
          typeLabel: '计划提醒',
          time: '2025.08.28 18:50',
          unread: true
        },
        {
          id: '3',
          title: '目标进度提醒',
          content: '李小红的英语学习目标已完成60%，继续保持',
          type: 'goal',
          typeLabel: '目标进度',
          time: '2025.08.28 18:00',
          unread: false
        },
        {
          id: '4',
          title: '系统维护通知',
          content: '系统将于今晚00:00-02:00进行维护，届时可能无法正常使用',
          type: 'system',
          typeLabel: '系统通知',
          time: '2025.08.28 10:00',
          unread: false
        },
        {
          id: '5',
          title: '心愿完成提醒',
          content: '王小刚的心愿"想要新书包"已完成，可以去兑换奖励了',
          type: 'wish',
          typeLabel: '心愿完成',
          time: '2025.08.27 15:30',
          unread: false
        }
      ]
    };
  },
  
  methods: {
    onTypeChange(e) {
      this.selectedType = this.notificationTypes[e.detail.value];
    },
    
    markAsRead(notification) {
      if (notification.unread) {
        notification.unread = false;
        uni.showToast({
          title: '标记为已读',
          icon: 'success'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.filter-card {
  margin-bottom: $spacing-base;
}

.filter-item {
  margin-bottom: $spacing-base;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.picker {
  width: 100%;
  height: 80rpx;
  padding: 0 $spacing-base;
  line-height: 80rpx;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.notifications-list {
  margin-bottom: $spacing-lg;
}

.notification-card {
  margin-bottom: $spacing-sm;
  transition: all 0.3s;
  
  &.unread {
    background-color: rgba($primary-color, 0.05);
  }
}

.notification-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.notification-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.notification-time {
  font-size: $font-size-sm;
  color: $text-tertiary;
}

.notification-content {
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: $spacing-base;
  line-height: 1.5;
}

.notification-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.notification-type {
  font-size: $font-size-xs;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.type-system {
  background-color: rgba($info-color, 0.1);
  color: $info-color;
}

.type-points {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.type-plan {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.type-goal {
  background-color: rgba($warning-color, 0.1);
  color: $warning-color;
}

.type-wish {
  background-color: rgba($error-color, 0.1);
  color: $error-color;
}

.notification-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.unread-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: $primary-color;
}

.read-status {
  font-size: $font-size-xs;
  color: $text-tertiary;
}

.no-notifications {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
}

.no-text {
  font-size: $font-size-base;
  color: $text-tertiary;
}
</style>